import React, { useState } from 'react'
import { Card, Calendar, Modal, Form, Select, TimePicker, Button, Table, Tag, Space, Alert } from 'antd'
import { PlusOutlined, SwapOutlined, CopyOutlined } from '@ant-design/icons'
import Layout from '../components/Layout/Layout'
import dayjs from 'dayjs'

const { Option } = Select
const { RangePicker } = TimePicker

export default function Scheduling() {
  const [schedules, setSchedules] = useState([
    {
      id: 1,
      date: '2024-01-15',
      shift: 'morning',
      employee: '张三',
      department: '安保部',
      position: '门岗',
      status: 'confirmed'
    },
    {
      id: 2,
      date: '2024-01-15',
      shift: 'afternoon',
      employee: '李四',
      department: '安保部',
      position: '巡逻',
      status: 'pending'
    }
  ])

  const [employees] = useState([
    { id: 1, name: '张三', department: '安保部', skills: ['门岗', '巡逻'] },
    { id: 2, name: '李四', department: '安保部', skills: ['巡逻', '监控'] },
    { id: 3, name: '王五', department: '清洁部', skills: ['保洁', '绿化'] }
  ])

  const [modalVisible, setModalVisible] = useState(false)
  const [selectedDate, setSelectedDate] = useState(null)
  const [form] = Form.useForm()

  const shiftTypes = {
    morning: { name: '早班', time: '08:00-16:00', color: 'blue' },
    afternoon: { name: '中班', time: '16:00-24:00', color: 'orange' },
    night: { name: '夜班', time: '00:00-08:00', color: 'purple' }
  }

  const getScheduleForDate = (date) => {
    const dateStr = date.format('YYYY-MM-DD')
    return schedules.filter(s => s.date === dateStr)
  }

  const dateCellRender = (value) => {
    const daySchedules = getScheduleForDate(value)
    return (
      <div>
        {daySchedules.map(schedule => (
          <div key={schedule.id} style={{ fontSize: 10, marginBottom: 2 }}>
            <Tag color={shiftTypes[schedule.shift].color} size="small">
              {schedule.employee}
            </Tag>
          </div>
        ))}
      </div>
    )
  }

  const handleDateSelect = (date) => {
    setSelectedDate(date)
    setModalVisible(true)
  }

  const handleSubmit = async (values) => {
    const newSchedule = {
      id: Date.now(),
      date: selectedDate.format('YYYY-MM-DD'),
      ...values,
      status: 'confirmed'
    }
    setSchedules(prev => [...prev, newSchedule])
    setModalVisible(false)
    form.resetFields()
  }

  const columns = [
    { title: '日期', dataIndex: 'date', key: 'date' },
    { 
      title: '班次', 
      dataIndex: 'shift', 
      key: 'shift',
      render: (shift) => (
        <Tag color={shiftTypes[shift].color}>
          {shiftTypes[shift].name}
        </Tag>
      )
    },
    { title: '员工', dataIndex: 'employee', key: 'employee' },
    { title: '部门', dataIndex: 'department', key: 'department' },
    { title: '岗位', dataIndex: 'position', key: 'position' },
    { 
      title: '状态', 
      dataIndex: 'status', 
      key: 'status',
      render: (status) => (
        <Tag color={status === 'confirmed' ? 'green' : 'orange'}>
          {status === 'confirmed' ? '已确认' : '待确认'}
        </Tag>
      )
    },
    {
      title: '操作',
      key: 'action',
      render: (_, record) => (
        <Space>
          <Button size="small" icon={<SwapOutlined />}>调班</Button>
          <Button size="small" icon={<CopyOutlined />}>复制</Button>
        </Space>
      )
    }
  ]

  return (
    <Layout>
      <div style={{ padding: '24px' }}>
        <Card title="智能排班系统">
          <Alert
            message="排班提醒"
            description="本周还有3个班次未安排，建议及时补充人员。"
            type="warning"
            showIcon
            style={{ marginBottom: 16 }}
          />
          
          <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr', gap: 16 }}>
            <div>
              <Calendar
                dateCellRender={dateCellRender}
                onSelect={handleDateSelect}
              />
            </div>
            
            <div>
              <Card title="排班统计" size="small">
                <Table
                  columns={columns}
                  dataSource={schedules}
                  rowKey="id"
                  size="small"
                  pagination={{ pageSize: 10 }}
                />
              </Card>
            </div>
          </div>
        </Card>

        <Modal
          title={`安排班次 - ${selectedDate?.format('YYYY-MM-DD')}`}
          open={modalVisible}
          onOk={() => form.submit()}
          onCancel={() => setModalVisible(false)}
        >
          <Form
            form={form}
            layout="vertical"
            onFinish={handleSubmit}
          >
            <Form.Item name="shift" label="班次" rules={[{ required: true }]}>
              <Select placeholder="选择班次">
                {Object.entries(shiftTypes).map(([key, shift]) => (
                  <Option key={key} value={key}>
                    {shift.name} ({shift.time})
                  </Option>
                ))}
              </Select>
            </Form.Item>
            
            <Form.Item name="employee" label="员工" rules={[{ required: true }]}>
              <Select placeholder="选择员工">
                {employees.map(emp => (
                  <Option key={emp.id} value={emp.name}>
                    {emp.name} - {emp.department}
                  </Option>
                ))}
              </Select>
            </Form.Item>
            
            <Form.Item name="position" label="岗位" rules={[{ required: true }]}>
              <Select placeholder="选择岗位">
                <Option value="门岗">门岗</Option>
                <Option value="巡逻">巡逻</Option>
                <Option value="监控">监控</Option>
                <Option value="保洁">保洁</Option>
              </Select>
            </Form.Item>
          </Form>
        </Modal>
      </div>
    </Layout>
  )
}